import React from "react";
import { DefaultDraftBlockRenderMap } from "draft-js";
import Immutable from "immutable";
import classNames from "classnames";

import CodeBlock from "./CodeBlock";
import NextDiv from "./NextDiv";

const UL_WRAP = <ul className={classNames("miuffy-ul")} />;
const OL_WRAP = <ol className={classNames("miuffy-ol")} />;

function BlockRenderMapPlugin() {
  this.apply = getEditor => {
    const { hooks } = getEditor();
    hooks.createBlockRenderMap.tap("BlockRenderMapPlugin", () => {
      const newBlockRenderMap = Immutable.Map({
        "header-two": {
          element: "h2"
        },

        "unordered-list-item": {
          element: "li",
          wrapper: UL_WRAP
        },

        "ordered-list-item": {
          element: "li",
          wrapper: OL_WRAP
        },

        "code-block": {
          element: "pre",
          wrapper: <CodeBlock />
        },

        unstyled: {
          element: "div",
          wrapper: <NextDiv />
        }
      });

      return DefaultDraftBlockRenderMap.merge(newBlockRenderMap);
    });
  };
}

export default BlockRenderMapPlugin;
